import { onMounted, onUnmounted, onActivated, onDeactivated } from "vue";
import { formatBgColor, formatTextColor } from "./cssUtils";

function bindLife(change, recover) {
  onMounted(change);
  onActivated(change);
  onUnmounted(recover);
  onDeactivated(recover);
}

export function useFlexWrap() {
  let oldClass = "";
  let change = () => {
    oldClass = document.body.className;
    document.body.className += " flex-wrap";
  };

  let recover = () => {
    document.body.className = oldClass;
  };

  bindLife(change, recover);
}

export function useColorReset(bg, color) {
  let oldColor = "";
  let oldBg = "";

  let change = () => {
    if (bg) {
      oldBg = document.body.style.backgroundColor;
      document.body.style.backgroundColor = formatBgColor(bg);
    }
    if (color) {
      oldColor = document.body.style.color;
      document.body.style.color = formatTextColor(color);
    }
  };

  let recover = () => {
    if (bg) {
      document.body.style.backgroundColor = oldBg;
    }
    if (color) {
      document.body.style.color = oldColor;
    }
  };

  bindLife(change, recover);
}
